<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Product Page Template</title>
        <link rel="stylesheet" href="css/app.css">
    </head>
    <body>
        <div class="top-bar">
            <div class="top-bar-left">
                <ul class="menu dropdown" data-dropdown-menu>
                    <li class="menu-text">Yeti Store</li>
                    <li class="has-submenu">
                        <a href="#">One</a>
                        <ul class="menu submenu vertical" data-submenu>
                            <li><a href="#">One</a></li>
                            <li><a href="#">Two</a></li>
                            <li><a href="#">Three</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                </ul>
            </div>
            <div class="top-bar-right">
                <ul class="menu">
                    <li><input type="text" placeholder="Search"></li>
                    <li>
                        <button class="button">Search</button>
                    </li>
                </ul>
            </div>
        </div>
        <br>
        <article class="grid-container">
            <div class="grid-x cell">
                <nav aria-label="Your are here:" role="navigation">
                    <ul class="breadcrumbs">
                        <li><a href="#">Home</a>
                        <li><a href="#">Feature</a></li>
                        <li class="disabled">Gene Splicing</li>
                        <li>
                            <span class="show-for-sr">Current: </span> Cloning
                        </li>
                    </ul>
                </nav>

            </div>

            <div class="grid-x grid-margin-x">
                <div class="cell medium-6">
                    <img class="thumbnail" src="https://placehold.it/650x350" alt="Big Image">
                    <div class="grid-x grid-padding-x small-up-4">
                        <div class="cell"><img src="https://placehold.it/650x350" alt=""></div>
                        <div class="cell"><img src="https://placehold.it/650x350" alt=""></div>
                        <div class="cell"><img src="https://placehold.it/650x350" alt=""></div>
                        <div class="cell"><img src="https://placehold.it/650x350" alt=""></div>
                    </div>
                </div>
                <div class="cell medium-6 large-5 large-offset-1">
                    <h3>My Awesome Product</h3>
                    <p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In
                        pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis
                        aliquet egestas purus in.</p>
                    <label>
                        Size
                        <select>
                            <option value="small">Small</option>
                            <option value="medium">Medium</option>
                            <option value="large">Large</option>
                        </select>
                    </label>
                    <div class="grid-x">
                        <div class="cell small-3"><label for="quantity" class="middle">Quantity</label></div>
                        <div class="cell small-9"><input type="number" id="quantity" value="1"></div>
                    </div>
                    <button class="button large expanded">Buy Now</button>
                    <div class="button-group expanded">
                        <button class="button secondary">Facebook</button>
                        <button class="button secondary">Twitter</button>
                        <button class="button secondary">Weixin</button>
                    </div>
                </div>
            </div>

            <hr>

            <ul class="tabs" id="example-tabs" data-tabs>
                <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Reviews</a></li>
                <li class="tabs-title"><a href="#panel2">Similar Products</a></li>
            </ul>
            <div class="tabs-content" data-tabs-content="example-tabs">
                <div class="tabs-panel is-active" id="panel1">
                    <h4>Reviews</h4>
                    <div class="media-object stack-for-small">
                        <div class="media-object-section">
                            <img class="thumbnail" src="https://placehold.it/200x200" alt="">
                        </div>
                        <div class="media-object-section">
                            <h5>Mike Stevenson</h5>
                            <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
                        </div>
                    </div>
                    <div class="media-object stack-for-small">
                        <div class="media-object-section">
                            <img class="thumbnail" src="https://placehold.it/200x200" alt="">
                        </div>
                        <div class="media-object-section">
                            <h5>Mike Stevenson</h5>
                            <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
                        </div>
                    </div>
                    <div class="media-object stack-for-small">
                        <div class="media-object-section">
                            <img class="thumbnail" src="https://placehold.it/200x200" alt="">
                        </div>
                        <div class="media-object-section">
                            <h5>Mike Stevenson</h5>
                            <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
                        </div>
                    </div>
                    <label>
                        My Review
                        <textarea rows="" placeholder="None"></textarea>
                    </label>
                    <button class="button">Submit Review</button>
                </div>
                <div class="tabs-panel" id="panel2">
                    <div class="grid-x grid-margin-x medium-up-3 large-up-5">
                        <div class="cell">
                            <img class="thumbnail" src="https://placehold.it/350x200">
                            <h5>Other Product <small>$22</small></h5>
                            <p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam.</p>
                            <a href="#" class="button hollow tiny expanded">Buy Now</a>
                        </div>
                        <div class="cell">
                            <img class="thumbnail" src="https://placehold.it/350x200">
                            <h5>Other Product <small>$22</small></h5>
                            <p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam.</p>
                            <a href="#" class="button hollow tiny expanded">Buy Now</a>
                        </div>
                        <div class="cell">
                            <img class="thumbnail" src="https://placehold.it/350x200">
                            <h5>Other Product <small>$22</small></h5>
                            <p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam.</p>
                            <a href="#" class="button hollow tiny expanded">Buy Now</a>
                        </div>
                        <div class="cell">
                            <img class="thumbnail" src="https://placehold.it/350x200">
                            <h5>Other Product <small>$22</small></h5>
                            <p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam.</p>
                            <a href="#" class="button hollow tiny expanded">Buy Now</a>
                        </div>
                        <div class="cell">
                            <img class="thumbnail" src="https://placehold.it/350x200">
                            <h5>Other Product <small>$22</small></h5>
                            <p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam.</p>
                            <a href="#" class="button hollow tiny expanded">Buy Now</a>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="grid-x align-justify align-middle">
                <div class="cell medium-shrink">
                    <ul class="menu">
                        <li class="align-self-middle">Yeti Store</li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="cell medium-shrink">
                    <span>Copyright 2018</span>
                </div>
            </div>
        </article>
        <script src="node_modules/jquery/dist/jquery.js"></script>
        <script src="node_modules/what-input/dist/what-input.js"></script>
        <script src="node_modules/foundation-sites/dist/js/foundation.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>
